@charset "utf-8";

.sys-head-wrapper {
    background: url(../images/inner-pure-head.png) no-repeat center 0;
    background-size: 100% 100%;
    height: 1.08rem;
    position: relative;
    overflow: hidden;
    z-index: 10;
}

.sys-head-wrapper .main-tit-box {
    width: 8.80rem;
    height: .90rem;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: .10rem;
    margin-left: -4.40rem;
    z-index: 1;
}

.sys-head-wrapper .main-tit-box span {
    display: block;
    overflow: hidden;
    text-align: center;
    color: #fff;
}

.sys-head-wrapper .main-tit-box .title {
    font-size: .38rem;
    line-height: .70rem;
}

.sys-head-wrapper .main-tit-box .course, .sys-head-wrapper .main-tit-box .stage {
    font-size: .28rem;
}

.sys-head-wrapper .hd-left, .sys-head-wrapper .hd-right {
    width: 5.10rem;
    height: .60rem;
    position: relative;
    overflow: hidden;
    margin-top: .20rem;
    z-index: 2;
}

.sys-head-wrapper .hd-left .func-menu-box .one-item, .sys-head-wrapper .hd-right .func-menu-box .one-item {
    width: 50%;
    height: .60rem;
    float: left;
    line-height: .60rem;
    padding: 0 .15rem;
}

.sys-head-wrapper .hd-left .func-menu-box .one-item:hover, .sys-head-wrapper .hd-right .func-menu-box .one-item:hover {
    color: #d27d3e;
}

.sys-head-wrapper .hd-left .func-menu-box.fm-vertical-mode, .sys-head-wrapper .hd-right .func-menu-box.fm-vertical-mode {
    margin-left: 0rem;
}

.sys-head-wrapper .hd-left .func-menu-box.fm-vertical-mode .one-item, .sys-head-wrapper .hd-right .func-menu-box.fm-vertical-mode .one-item {
    width: 100%;
    height: .30rem;
    line-height: .30rem;
    padding-left: .20rem;
}

.sys-head-wrapper .nav-box {
    font-size: 0;
}

.sys-head-wrapper .nav-box .one-item {
    height: .60rem;
    display: inline-block;
    overflow: hidden;
    color: #fff;
    font-size: .16rem;
    line-height: .60rem;
    margin-right: .40rem;
}

.sys-head-wrapper .nav-box .one-item:hover {
    color: #d27d3e;
}

.sys-head-wrapper .nav-box .one-item.active {
    font-size: .18rem;
    font-weight: bold;
    color: #fff !important;
}

.sys-head-wrapper .friend-box {
    height: .60rem;
    padding-right: .30rem;
    overflow: hidden;
    font-size: 0;
    line-height: .60rem;
    text-align: right;
}

.sys-head-wrapper .friend-box .clock-box i, .sys-head-wrapper .friend-box .user-box i {
    margin-right: 0.05rem;
    margin-top: -0.02rem;
}

.sys-head-wrapper .friend-box .clock-box, .sys-head-wrapper .friend-box .user-box {
    font-size: .16rem;
    color: #fff;
}

.sys-head-wrapper .friend-box .clock-box {
    margin-right: .30rem;
}

.sys-head-wrapper .friend-box .user-box i {
    width: .16rem;
    height: .16rem;
    border: 0.01rem solid #fff;
    border-radius: 0.08rem;
    overflow: hidden;
    line-height: normal;
    vertical-align: middle;
}

.sys-head-wrapper .friend-box .user-box {
    margin-right: .30rem;
}

.sys-head-wrapper .friend-box .fg-line {
    color: #5c90d9;
    font-size: .16rem;
    font-weight: bold;
    margin-right: .30rem;
}

.sys-head-wrapper .friend-box .exit-btn {
    font-size: .16rem;
    color: #ff5252;
}

.sys-head-wrapper .friend-box .exit-btn:hover {
    color: #d27d3e;
}

.sys-head-wrapper .hd-left {
    float: left;
    margin-left: .30rem;
}

.sys-head-wrapper .hd-right {
    float: right;
    margin-left: .30rem;
}

.func-menu-box .one-item {
    display: block;
    overflow: hidden;
    font-size: .20rem;
    color: #fff;
}